<template>
    <div class="body">
        <!-- 顶部 -->
        <div class="fl-header">
            <div>
                <a href="">
                    <span>分类</span>
                </a>
            </div>
            <div>
                <a href="">
                    <span>品牌</span>
                </a>
            </div>
        </div>
        <!-- 中间 -->
        <div class="fl-index">
            <!-- 左侧列表 -->
            <div class="fl-left">
                <ul>
                    <li>狗狗主粮</li>
                    <li>狗狗玩具</li>
                    <li>狗狗清洁</li>
                    <li>狗狗保健</li>
                    <li>服饰窝垫</li>
                    <li>狗狗零食</li>
                </ul>
            </div>
            <!-- 右侧选框 -->
            <gou-gou />
            <div class="fl-right" >
                <div class="fl-right-one">
                    <div class="fl-right-one-box">
                        <a>狗狗主粮
                            <img src="../../public/cate_right_img.png" alt="">
                        </a>
                        <ul class="clearfix">
                            <li>
                                <a href="">
                                    <div class="right-one-box">
                                        <img src="../../public/zhuliang/1.jpg" alt="">
                                    </div>
                                    <p>进口狗粮</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <div class="right-one-box">
                                        <img src="../../public/zhuliang/2.jpg" alt="">
                                    </div>
                                    <p>国产狗粮</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <div class="right-one-box">
                                        <img src="../../public/zhuliang/3.jpg" alt="">
                                    </div>
                                    <p>冻干狗粮</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="bgfff">
                    <div class="fl-right-pp">
                        <a href="">热门品牌</a>
                        <ul class="clearfix">
                            <li>
                                <a href="">
                                    <div class="right-two-box">
                                        <img src="../../public/zhuliang/品牌1.jpg" alt="">
                                    </div>
                                    <p>天衡宝Natural Balance</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <div class="right-two-box">
                                        <img src="../../public/zhuliang/品牌2.jpg" alt="">
                                    </div>
                                    <p>比瑞吉Nature Bridge</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <div class="right-two-box">
                                        <img src="../../public/zhuliang/品牌3.jpg" alt="">
                                    </div>
                                    <p>AVODerm</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <div class="right-two-box">
                                        <img src="../../public/zhuliang/品牌4.jpg" alt="">
                                    </div>
                                    <p>枫树大道Maples</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <div class="right-two-box">
                                        <img src="../../public/zhuliang/品牌5.jpg" alt="">
                                    </div>
                                    <p>原始猎食渴望Orijen</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <div class="right-two-box">
                                        <img src="../../public/zhuliang/品牌6.jpg" alt="">
                                    </div>
                                    <p>伯纳天纯Pure&Natural</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <div class="right-two-box">
                                        <img src="../../public/zhuliang/品牌7.jpg" alt="">
                                    </div>
                                    <p>冠能PRO PLAN</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <div class="right-two-box">
                                        <img src="../../public/zhuliang/品牌8.jpg" alt="">
                                    </div>
                                    <p>雷米高</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
         <!-- 底部栏 -->
        <div class="bottom">
            <mt-tabbar fixed>
                <mt-tab-item>
                    <img slot="icon" src="../../public/底部-image/精选.png">精选
                </mt-tab-item>
                <mt-tab-item>
                    <img slot="icon" src="../../public/底部-image/分类.png">分类
                </mt-tab-item>
                <mt-tab-item>
                    <img slot="icon" src="../../public/底部-image/购物车.png">购物车
                </mt-tab-item>
                <mt-tab-item>
                    <img slot="icon" src="../../public/底部-image/我的.png">我的
                </mt-tab-item>
            </mt-tabbar>
        </div>    
    </div>
</template>
<script>
import GouGou from '@/components/GouGou.vue'
export default {
  components: { GouGou },
}
</script>

<style>
/* 公共样式 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    min-width: 320px;
}
div{
    display: block;
}
.bgfff{
    background-color: #fff;
}
ul{
   list-style:none;
   display: block;
}
a{
   text-decoration: none; 
}

/* 顶部 */
.fl-header{
    background-color: #fff;
    height: 40px;
    padding:0 15px;
    display: flex;
    justify-content: center; 
}
.fl-header a{
    padding: 0 15px;
    text-decoration: none;
}
.fl-header a span{
    font-weight: bold;
    color:black;
    font-size: 13px;
    line-height: 40px;
}
.fl-header a span:hover{
     color:#74be5f;
}

/* 中间 */

/* 左侧 */
.fl-left{
    width: 70px;
    position: fixed;
    border-right: 5px solid #f3f4f5;
    display: block;
    overflow-y:scroll
}
.fl-left ul{
    /* border: 1px red solid; */
    list-style: none;
}
.fl-left ul>li:hover{
    color:#74be5f;
    background-color:#F3F4F5 ;
}
.fl-left ul>li{
    font-size :13px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-bottom:1px solid #F3F4F5;
}

/* 右侧 */
.fl-right{
    display:inline-block;
    margin-left: 65px;
    border-top: 5px solid #f3f4f5;
    /* border: 1px green solid; */
    background-color: #fff;
}
.fl-right-one{
    background-color: #fff;
}
.fl-right-one-box,.fl-right-pp{
    padding: 5px 5px 20px;
    border-top: 1px solid #f3f4f5;
    width: 300px;
}
.fl-right-one-box>a,.fl-right-pp>a{
    color: #999;
    font-size: 12px;
    padding-left :5px ;
    display: block;
    margin-top: 10px;
}
.fl-right-pp>a{
    margin-top: 10px;
}
.fl-right-one-box>a>img{
    height: 10px;
    margin-top: 5px;
    margin-right: 5px;
    float: right;
    border: 0;
}
.clearfix:after{
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.fl-right-one ul>li{
    width: 33.33%;
    padding: 0 5px;
    margin-top: 10px;
    float: left;
    list-style:none;
}
.right-one-box{
    background-image:url(../../public/bgi.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #f4f4f4;
    background-size: 120px auto;
    position: relative;
    padding-top: 100%;
}
.fl-right-one ul>li>a{
    display: block;
    color: #333;
    text-decoration: none;
}
.fl-right-one ul>li>a>div{
    position: relative;
}
.fl-right-one ul img{
   width:86.6px;
   top: 0;
   left: 0;
   border: 0;
   position: absolute;
} 
.fl-right-one ul>li>a>p{
    font-size: 13px;
    margin: 10px 0 0;
    text-align: center;
}
.fl-right-pp li{
    width: 50% !important;
    float: left;
    position: relative;
    margin-top: 10px;
    padding: 0 5px;
}
.right-two-box{
    /* background-image:url(../../public/bgi.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    padding: 0;
    background-size: 120px auto;
    text-align: center;
    height: 55px;
    overflow: hidden !important; */
    height: 55px;
    border: 1px solid #f3f4f5;
}
.right-two-box img{
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: 4px;
    position: absolute;
    height: 45px;
}
.fl-right-pp p{
    font-size: 12px;
    color:#333;
    margin-top: 5px;
    text-align: center;
}
</style>
<script>
export default {
    
}
</script>